<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>模版表达式</title>
    <style>
        .title {
            padding-left: 10px;
            height: 40px;
            line-height: 40px;
            border-left: 5px solid dodgerblue;
            margin-bottom: 10px;
            margin-top: 10px;
        }
        .container {
            height: 100px;
            width: 100px;
            background-color: dodgerblue;
        }
    </style>
</head>
<body>
<div>
    <!--字符串-->
    <div>
        <div class="title">
            1、字符串
        </div>
        <p th:text="${data}"></p>
    </div>
    <!--User对象属性-->
    <div>
        <div class="title">
            2、User对象属性
        </div>
        用户编号：<div th:text="${user.id}"></div>
        用户姓名：<span th:text="${user.name}"></span>
        用户手机号：<input th:value="${user.phone}"></input>
        用户地址：<textarea th:text="${user.address}"></textarea>
    </div>
    <!--CSS 属性赋值-->
    <div>
        <div class="title">
            3、CSS 属性赋值
        </div>
        <p> 这里将下面的DIV 设置 class 和 id 属性 -> 指定 class 和 id 的值 为container </p>
        <div th:class="${css}" th:id="${css}"></div>
    </div>
    <!--动态事件 onclick-->
    <div>
        <div class="title">
            4、动态事件 onclick
        </div>
        <div th:onclick="'show('+${user.id}+')'" style="cursor: pointer">点击：获取用户编号</div>
    </div>
    <!--列表遍历 如List  、 遍历Array数组-->
    <div>
        <div class="title">
            5、列表遍历 如List 、 遍历Array数组
        </div>
        <div th:each="user:${userList}">
            用户编号：<span th:text="${user.id}"></span>
            用户姓名：<span th:text="${user.name}"></span>
            用户手机：<span th:text="${user.phone}"></span>
            用户地址：<span th:text="${user.address}"></span>
        </div>
    </div>
    <!--Map遍历  key: 键 , value: 值-->
    <div>
        <div class="title">
            6、Map遍历 key: 键 , value: 值
        </div>
        <div th:each="userMap:${userMaps}">
            <span th:text="${userMap.key}"></span>
            <span th:text="${userMap.value}"></span>
            <span th:text="${userMap.value.id}"></span>
            <span th:text="${userMap.value.name}"></span>
            <span th:text="${userMap.value.phone}"></span>
            <span th:text="${userMap.value.address}"></span>
        </div>
    </div>
    <!--if / unless-->
    <div>
        <div class="title">
            7、if / unless
        </div>
        <div>
            <p>th:if 用法:如果满足条件显示，否则相反</p>
            <span th:if="${ifData eq 1}"> ifData 是否== 1 </span>
            <span th:if="${ifData eq null}"> ifData 是否== null </span>
            <span th:if="${ifData == null}"> ifData 是否== null </span>
            <span th:if="${ifData != null}"> ifData 是否!= null </span>
        </div>
    </div>
</div>

</body>
<script>
    function show(id) {
        alert("用户编号为：" + id);
    }
</script>
</html>
